import React from 'react';
import { connect, SubscriptionAPI } from 'dva';
import { Tabs, Row, Col, Input } from 'antd';
import { Board, Card, Icon } from 'components';
import InstanceCard from './components/InstanceCard';
import InstanceList from './components/InstanceList';
import styles from './index.less'

interface Props extends SubscriptionAPI {
  allList: [];
  idleList: [];
  buildingList: [];
  physicalList: [];
  virtualList: [];
  shape: string;
}

const { TabPane } = Tabs;
const tabBarStyle = {
  marginTop: '15px',
  marginBottom: 0,
  backgroundColor: '#fff',
};

const Operations = connect(({ agent }: any) => agent)((props: Props) => {
  const { shape } = props;

  const onClickIcon = (key: string) => {
    props.dispatch({
      type: 'agent/save',
      payload: {
        shape: key,
      }
    })
  };

  return (
    <div className={styles['extra-operations']}>
      <Input
        className={styles.search}
        placeholder="按ID搜索但不知如何展示UI"
        style={{ width: 170, lineHeight: '52px' }}
        prefix={<Icon type="search" style={{ color: 'rgba(0,0,0,.25)' }} />}
      />
      <span className={styles['icon-group']}>
        <Icon
          type="th-card"
          className={styles[shape === 'card' ? 'active' : '']}
          onClick={() => onClickIcon('card')}
        />
        <Icon
          type="th-list"
          className={styles[shape === 'list' ? 'active' : '']}
          onClick={() => onClickIcon('list')}
        />
      </span>
    </div>
  )
});

@connect(({ agent }: any) => agent)
class Page extends React.PureComponent<Props> {
  state = {
    activeKey: 'all',
  };

  componentDidMount() {
    const {
      dispatch,
    } = this.props;
    dispatch({
      type: 'agent/read',
    });
  }

  onChange = (activeKey: string) => {
    this.setState({
      activeKey
    });
  };

  render () {
    const { activeKey } = this.state;
    const {
      allList,
      idleList,
      buildingList,
      physicalList,
      virtualList,
      shape,
    } = this.props;
    const list = [
      {
        label: 'ALL',
        value: allList.length,
      },
      {
        label: 'PHYSICAL',
        value: physicalList.length,
      },
      {
        label: 'VIRTUAL',
        value: virtualList.length,
      }
    ];

    return (
      <div>
        <Row gutter={30} type="flex" justify="space-between">
          <Col span={8}>
            <Board icon="cog" spin={true} text="Building" amount={buildingList.length} color="#FF9A2A" />
          </Col>
          <Col span={8}>
            <Board icon="coffee"  text="Idle" amount={idleList.length} color="#7fbc39" />
          </Col>
          <Col span={8}>
            <Board>
              <Card list={list} />
            </Board>
          </Col>
        </Row>
        <Tabs
          tabBarStyle={tabBarStyle}
          defaultActiveKey={activeKey}
          onChange={this.onChange}
          tabBarExtraContent={<Operations />}
        >
          <TabPane tab="All" key="all">
            {
              shape === 'list' ? (
                <InstanceList data={allList} />
              ) : (
                <InstanceCard data={allList} />
              )
            }
          </TabPane>
          <TabPane tab="Physical" key="physical">
            {
              shape === 'list' ? (
                <InstanceList data={physicalList} />
              ) : (
                <InstanceCard data={physicalList} />
              )
            }
          </TabPane>
          <TabPane tab="Virtual" key="virtual">
            {
              shape === 'list' ? (
                <InstanceList data={virtualList} />
              ) : (
                <InstanceCard data={virtualList} />
              )
            }
          </TabPane>
        </Tabs>
      </div>
    )
  }
}
export default Page;
